<template>
  <div>
    <div>
      <el-form :inline="true">
        <el-form-item label="相册名称">
          <el-input
            v-model="filter.albumName"
            placeholder="输入相册名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="相册内容">
          <el-input
            v-model="filter.remark"
            placeholder="输入相册内容"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="records">
      <el-table-column type="index" label="序号" width="60px" />
      <el-table-column label="相册头像">
        <template #default="scope">
          <img class="w-14 h-2w-14" :src="scope.row.albumHeadImg" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="albumName" label="相册名称" />
      <el-table-column prop="remark" label="内容"> </el-table-column>

      <el-table-column label="审核状态">
        <template #default="scope">
          <el-tag v-if="scope.row.approveStatus === 1">待审核</el-tag>
          <el-tag v-if="scope.row.approveStatus === 2" type="success"
            >通过</el-tag
          >
          <el-tag v-if="scope.row.approveStatus === 3" type="danger"
            >拒绝</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column label="相册组大小">
        <template #default="scope">
          {{ scope.row.groupSize }}
        </template>
      </el-table-column>
      <el-table-column prop="likeNum" label="点赞数"> </el-table-column>
      <el-table-column prop="publishDate" label="发布日期"> </el-table-column>
      <el-table-column label="发布人">
        <template #default="scope">
          <div class="flex items-center">
            <img
              class="w-8 h-8 rounded-full"
              :src="scope.row.userHeadImg"
              alt=""
            />
            <span class="ml-2">{{ scope.row.userName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="350px">
        <template #default="scope">
          <el-button type="primary" @click="viewDetail(scope.row)"
            >查看</el-button
          >
          <el-button type="success" @click="auditItem(scope.row, 2)"
            >审核通过</el-button
          >
          <el-button type="danger" @click="auditItem(scope.row, 3)"
            >拒绝并删除</el-button
          >
          <!-- <el-popconfirm
            title="确定删除该记录？"
            confirm-button-text="确定"
            cancel-button-text="取消"
            @confirm="delDetail(scope.row)"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end mt-2">
      <el-pagination
        background
        layout="prev, pager, next"
        v-model:current-page="filter.pageNum"
        :default-page-size="filter.pageSize"
        :total="total"
        @prev-click="getList"
        @next-click="getList"
        @current-change="getList"
      />
    </div>
    <el-dialog v-model="viewDialog" title="查看记录详情">
      <div class="flex flex-wrap">
        <div class="mx-2" v-for="item in itemDetail">
          <img class="h-36" v-if="item.type === 1" :src="item.url" alt="" />
          <video v-if="item.type === 2" :src="item.url" alt="" />
          <div class="text-center">{{ item.size }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import {
  getAuditList,
  getMediaContent,
  delAlbumGroup,
  updateAuditStatus,
} from "@/apis/group";
import { ElMessage } from "element-plus";
const total = ref(1);

const records = ref<AlbumGroupItem[]>([]);
const filter = reactive<AlbumGroupFilter>({
  pageNum: 1,
  pageSize: 10,
});
const getList = async () => {
  const res = await getAuditList(filter);
  total.value = res.total;

  records.value = res.list;
};
const search = () => {
  filter.pageNum = 1;
  getList();
};
onMounted(() => {
  getList();
});
const itemDetail = ref<MediaItem[]>([]);
const viewDialog = ref(false);
const viewDetail = (row: AlbumGroupItem) => {
  viewDialog.value = true;
  getMedia(row.groupId);
};
const getMedia = async (groupId: number) => {
  const res = await getMediaContent(groupId);
  itemDetail.value = res;
};
const auditItem = async (row: AlbumGroupItem, status: number) => {
  await updateAuditStatus(row.groupId, status);
  ElMessage.success("审核成功");
  getList();
};
// const delDetail = (row: AlbumGroupItem) => {};
</script>

<style scoped></style>
